<template>
  <div ref="stackedArea" class="stackedArea">stackedArea</div>
</template>

<script>
import * as echarts from 'echarts/core'
import { GridComponent } from 'echarts/components'
import { LineChart } from 'echarts/charts'
import { UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'

echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition])
export default {
  mounted() {
    var chartDom = this.$refs.stackedArea
    var myChart = echarts.init(chartDom)
    var option

    option = {
      xAxis: [
        {
          show: false,
          type: 'category'
        }
      ],
      yAxis: [
        {
          show: false
        }
      ],
      series: [
        {
          type: 'line',
          areaStyle: {},
          data: [100, 200, 345, 223, 450, 255, 345]
        }
      ]
    }

    option && myChart.setOption(option)
  }
}
</script>

<style lang="scss" scoped>
::v-deep canvas{
    // width: 100px;
    // height: 100px;
    top: -13px !important
}
.stackedArea{
    height:100px;
    // position: absolute;
    // top: 60px;
}
</style>
